import { useCallback, useState } from "react";
import MemoChild from "./memoChild";

function MemoIndex() {
  console.log("memoIndex");
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

    const handleClick = useCallback(() => {
      setCount(count + 1);
    }, [count]);
  // const handleClick = () => {
  //   // setCount(count + 1);
  //   console.log("handleClick");
  // };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div>count: {count}</div>
      <MemoChild count={count} onClick={handleClick} />
    </div>
  );
}

export default MemoIndex;
